<template>
    <div>
        <Row type="flex" style="margin-bottom: 10px" justify="start">
            <Button icon="md-add" type="primary"
                    @click="modal.addModel=true">添加
            </Button>
            <Button icon="md-trash" style="margin-left: 10px"  type="error"
                    @click="batchConfirm">批量删除
            </Button>
        </Row>
        <Row type="flex" justify="center">
            <Table row-key="courseTypeId" ref="selection" :loading="loading" border :columns="courseTypeColums" :data="courseTypelist" :indent-size=140>
                <template slot-scope="{ row }" slot="action">
                    <Button icon="md-build"  type="primary" size="small"
                            @click="updateCourse(row)" style="margin-right: 5px">编辑
                    </Button>
                    <Button icon="md-trash" type="error" @click="delConfirm(row)"
                            size="small">删除
                    </Button>
                </template>
            </Table>
<!--            <Page style="margin-top:10px " :total="total" :page-size="courseTypeMap.pageSize" @on-change="changePage" show-elevator/>-->
            <addcourseType ref="addcourseType" :modal="modal" @addstatus="addstatus"></addcourseType>
            <updatecourseType ref="updatecourseType" :modal="modal" @updatestatus="updatestatus"></updatecourseType>
        </Row>
    </div>
</template>

<script>
    import addcourseType from "@c/course/courseType/addcourseType"
    import updatecourseType from "@c/course/courseType/updatecourseType"
    export default {
        data() {
            return {
                modal: {
                    parentList:[],
                    addModel: false,
                    updateModal: false,
                    courseType:{}
                },
                courseTypelist: [],
                loading: false,
                courseTypeMap: {
                    currentPage:1,
                    pageSize:1000
                },
                total: 0,
                courseTypeColums: [
                    {type: 'selection', width: 60, align: 'center'},
                    {type: 'index', title: "序号", width: 70, align: 'center'},
                    {title: "类型名称",tree:true, key: "courseTypeName",align: 'center', sortable: true},
                    {title: "类型级别",key: "courseTypeTag",align: 'center', sortable: true,
                        render:(h,params)=>{
                            if(params.row.courseTypeTag==='1'){ return <Tag color="success">一级类型</Tag>}
                            if(params.row.courseTypeTag==='2'){ return <Tag style="margin-left:100px" color="primary">二级类型</Tag>}
                        }
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 200,
                        align: 'center'
                    }
                ]
            }
        },
        methods: {
            /**
             * 单条删除确认
             */
            delConfirm (row) {
                let that = this;
                let list = [];
                if (row.parentId=='0'){//判断是否一级类型且含有子类型
                    if (row.children.length>0){
                        for (let i=0;i<row.children.length;i++){
                            list.push(row.children[i].courseTypeId);
                        }
                    }
                }

                list.push(row.courseTypeId);
                this.$Modal.confirm({
                    title: '温馨提示',
                    content: '<p>确认删除数据吗?</p><p>(注：删除一级类型将同时删除其对应的所有子类型)</p>',
                    onOk: () => {
                        this.http.post("/courseType/batchCourseType",{courseTypeIds:list}).then(res =>{
                            this.$Message.success("删除成功");
                            this.getAllcourseType();
                        })
                    },
                    onCancel: () => {
                        this.$Message.info('您已取消删除');
                    }
                });
            },
            /**
             * 批量删除确认
             */
            batchConfirm () {
                console.log(this.$refs.selection.getSelection())
                let checkedList = this.$refs.selection.getSelection();
                if (checkedList.length==0){//判断是否已勾选要删除的数据
                    this.$Message.warning("请先勾选要删除的数据！")
                    return;
                }
                let list = [];
                for (let i=0;i<checkedList.length;i++){
                    if (checkedList[i].parentId=='0'){//判断是否一级类型
                        if(checkedList[i].children.length>0){//判断其是否有子类型
                            for (let j=0;j<checkedList[i].children.length;j++){
                                list.push(checkedList[i].children[j].courseTypeId);
                            }
                        }
                    }
                    list.push(checkedList[i].courseTypeId);
                }
                let deletList = Array(new Set(list));
                console.log(deletList)
                this.$Modal.confirm({
                    title: '温馨提示',
                    content: '<p>确认删除选中的数据吗?</p><p>(注：删除一级类型将同时删除其对应的所有子类型)</p>',
                    onOk: () => {
                        this.http.post("/courseType/batchCourseType",{courseTypeIds:list}).then(res =>{
                            this.$Message.success("删除成功");
                            this.getAllcourseType();
                        })
                    },
                    onCancel: () => {
                        this.$Message.info('您已取消删除');
                    }
                });
            },
            /**
             * 获取全部课程类型信息
             */
            getAllcourseType() {
                this.loading = true
                this.http.post("/courseType/requestCourseTypeList", this.qs.parse(this.courseTypeMap)).then(res => {
                    if (res.data) {
                        this.courseTypeTree(res.data.list);
                        this.total = res.data.total
                    }
                }).finally(res => {
                    this.loading = false
                })
            },
            /**将数据以树形展示*/
            courseTypeTree(list){
                this.courseTypelist = [];
                list.forEach(one=>{
                    if (one.parentId == "0"){
                        let oneData = {};
                        oneData.courseTypeId = one.courseTypeId;
                        oneData.courseTypeName = one.courseTypeName;
                        oneData.courseTypeTag = '1';
                        oneData.parentId = '0';
                        oneData.children = [];
                        list.forEach(two=>{
                            if (one.courseTypeId == two.parentId){
                                let twoData = {};
                                twoData.courseTypeId = two.courseTypeId;
                                twoData.courseTypeName = two.courseTypeName;
                                twoData.courseTypeTag = '2';
                                twoData.parentId = two.parentId;
                                oneData.children.push(twoData);
                            }
                        })
                        this.courseTypelist.push(oneData)
                    }
                });
            },
            /**
             * 改变模态框的状态并传对象
             *
             */
             updateCourse(row){
                this.modal.updateModal = true;
                this.modal.courseType = row;
            },
            /**
             * 添加模态框状态
             * @param val
             */
            addstatus(val) {
                if (val){
                    this.getAllcourseType()
                }
                this.modal.addModel = false
            },
            /**
             * 编辑模态框状态
             * @param val
             */
            updatestatus(val) {
                if (val){
                    this.getAllcourseType()
                }
                this.modal.updateModal = false
            }

        },
        created() {
            this.getAllcourseType()
        },
        components:{addcourseType,updatecourseType}
    }
</script>

<style scoped>

</style>
